<template>
    <div class="selection" v-if="visible">
        <div @click="isOpen=!isOpen" 
            :class="{'header':true,'open':isOpen,'close':!isOpen}">
            <slot name="header"></slot>
            <span class="icon">
                <i class="fa fa-angle-double-down" v-if="isOpen"></i>
                <i class="fa fa-angle-double-up" v-else></i>
            </span>
        </div>
        
        <div class="body" v-if='isOpen'>
            <slot name="body"></slot>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            isOpen:true
        }
    },
    props:{
        visible:{
            type:Boolean,
            default:false
        },
        
    }

}
</script>

<style scoped>
.selection{
    margin-bottom: 1px;
}
.selection .header{
    background: #545c64;
    color: #fff;
    padding: 5px;
    font-weight: bold;
    cursor: pointer;
    /* 禁止选中 */
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;   
}
.close{
    border-left: 10px solid #545c64;
}
.open{
    border-left: 10px solid #409EFF;
}
.selection .header .icon{
   float: right;
   top: 0;
}
.selection .body{
    padding: 6px;
}

</style>
